<template>
  <div class="navbar">
    <div class="navbar-tags">
      <el-tag type="info" effect="dark" class="navbar-tag">首页</el-tag>
      <el-tag type="primary" effect="dark" class="navbar-tag">{{ title }}</el-tag>
    </div>
    <img :src="currentAvatar" alt="头像" class="navbar-avatar" @click="openFileBrowser" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '首页'
  },
  avatar: {
    type: String,
    default: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif'
  }
});

const currentAvatar = ref('');

const openFileBrowser = () => {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'image/*';
  fileInput.onchange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        currentAvatar.value = e.target.result;
        localStorage.setItem('currentAvatar', e.target.result);
      };
      reader.readAsDataURL(file);
    }
  };
  fileInput.click();
};

onMounted(() => {
  currentAvatar.value = localStorage.getItem('currentAvatar') || props.avatar;
});
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  padding: 0 32px;
  margin-bottom: 18px;
}
.navbar-tags {
  display: flex;
  align-items: center;
}
.navbar-tag {
  margin-right: 12px;
  font-size: 16px;
  padding: 0 16px;
  border-radius: 8px;
}
.navbar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.2s, transform 0.2s;
}
.navbar-avatar:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: scale(1.08);
}
</style>
